<?php
    $this->layout('base.phtml', [
        'title' => _('Add-ons'),
        'canonical' => url_full('addons'),
        'current_page' => 'addons',
    ]);
?>

<div class="section section--small section--longbottom flow flow--larger text--centered">
    <div class="section__title">
        <h1><?= _('Add-ons') ?></h1>
    </div>

    <div class="flow">
        <h2>
            <?= _f('Keep %s at hand in your browser', get_app_configuration('brand')) ?>
        </h2>

        <div class="cards cards--centered">
            <div class="card card--showcase">
                <a href="https://addons.mozilla.org/fr/firefox/addon/flus/" target="_blank" rel="noopener noreferrer">
                    <img alt="" src="<?= url_static('icon-firefox.svg') ?>" width="150" height="150" />
                    <br />
                    <?= _('Download for Firefox') ?>
                </a>
            </div>

            <div class="card card--showcase">
                <a href="https://chrome.google.com/webstore/detail/flus/gikjpohbbimicecbndkefebbpjobokjd" target="_blank" rel="noopener noreferrer">
                    <img alt="" src="<?= url_static('icon-chrome.svg') ?>" width="150" height="150" />
                    <br />
                    <?= _('Download for Chrome') ?>
                </a>
            </div>
        </div>
    </div>

    <div class="flow">
        <h2>
            <?= _('Your browser is not in the list?') ?>
        </h2>

        <div>
            <p>
                <?= _('Drag and drop this link to your browser bookmarks bar:') ?>
            </p>

            <a
                class="anchor--action"
                href="javascript:(function(){var%20win=window.open('about:blank','_blank');win.opener=null;win.location='<?= url_full('new link') ?>?url='+encodeURIComponent(location.href);})();"
            >
                <?= _f('Add to %s', get_app_configuration('brand')) ?>
            </a>
        </div>
    </div>

    <div class="flow">
        <h2>
            <?= _('Using a smartphone?') ?>
        </h2>

        <p class="paragraph--secondary">
            <i><?= _('Sorry, there’s no app for that.') ?></i>
        </p>

        <p>
            <?= _f('Instead, you can <strong>add a shortcut to %s on your home screen.</strong>', get_app_configuration('brand')) ?>
            <?= _('With modern browsers, it will work as a mobile application.') ?>
        </p>
    </div>
</div>
